import React, { FC, useEffect } from "react";
import { Menu } from 'antd';
import { ThemeType } from '@interfaces';
import { useSelector, useDispatch } from 'react-redux';
import { loadWallpaperTypes, selectWallpaperTypes } from '@store/slices/wallpaperTypes';
import './index.scss';

interface Props {
  theme: ThemeType;
  onMenuItemClick: (wallpaperType: string) => void;
}

const NavMenu: FC<Props> = (props: Props): JSX.Element => {

  const { theme, onMenuItemClick } = props;

  const wallpaperTypes = useSelector(selectWallpaperTypes);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(loadWallpaperTypes({ pageNo: 1, limit: 12, keyword: '' }))
  }, []);

  return <div className="menu-outer">
    <div className="menu-head"></div>
    <Menu
      theme={theme}
      mode="inline"
      className="menu-body"
      onClick={({ key }) => {
        onMenuItemClick(key);
      }}
    >
      {
        (wallpaperTypes||[]).map((row, index: number) => <Menu.Item data-testid={`menu-item__${index}`} key={row?._id}>{row?.title}</Menu.Item>)
      }
    </Menu>
    <div className="menu-foot"></div>
  </div>
}

export default NavMenu;
